<template>
    <view>
        <view class="order-detail">
            <view class="order-info">
                <view class="order-img">

                </view>
                <view>
                    <view class="place-name">广西平果鸳鸯滩...</view>
                    <view class="order-price">￥132.0</view>
                </view>
                <view class="iconfont icon-xiangyou go"></view>
            </view>
            <view class="line"></view>
            <view class="order-other-info">
                <view class="other-info-item">使用日期：12月12号（周六）</view>
                <view class="other-info-item">使用方法：无需换票，打开订单二维码扫码入园</view>
                <view class="other-info-item">入园时间：早10:00</view>
                <view class="other-info-item">入园地点：南宁凤凰谷</view>
                <view class="other-info-item">购买数量：1</view>
            </view>
        </view>
        <view class="bottom">
            <view class="bottom-button">支付</view>
        </view>
    </view>
</template>

<script>
export default {
    
}
</script>

<style>
    .order-detail {
        background: #ffffff;
        margin-top: 18rpx;
        padding: 36rpx 55rpx 0rpx 46rpx;
    }
    .order-info {
        position: relative;
        display: flex;
        justify-content: left;
        padding-bottom: 25rpx;
    }
    .order-img {
        width: 198rpx;
        height: 198rpx;
        border: 1rpx solid #ccc;
    }
    .place-name {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        margin-left: 38rpx;
    }
    .order-price {
        color: #FF1E1E;
        font-size: 36rpx;
        font-weight: bold;
        margin-left: 38rpx;
        margin-top: 40rpx;
    }
    .go {
        position: absolute;
        top: 0rpx;
        right: 0rpx;
    }
    .line {
        width: 671rpx;
        height: 1rpx;
        background: #F5F5F5;
        margin: 0 auto;
    }
    .order-other-info {
        padding: 50rpx 0 30rpx 0;
    }
    .other-info-item {
        height: 105rpx;
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 140rpx;
        background: #ffffff;
    }
    .bottom-button {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
        margin: 28rpx auto 0rpx;
    }
</style>